<template>
  <div class="nav">
    <div class="left">
      <span class="title">答卷详情</span>
      <div class="center">
        <span class="one" style="font-size: 20px">答题信息</span>
        <span class="one">答题人：{{$route.query.row.name}}</span>
        <span class="one">开始时间：{{$route.query.row.starttime}}</span>
        <span class="one">结束时间：{{$route.query.row.subtime}}</span>
        <span class="one">答题时长：{{$route.query.row.longtime}}</span>
      </div>
      <el-button plain class="next" @click="nextAnswer">下一份答卷</el-button>
    </div>
    <div class="right">
      <span class="head">答题详情</span>
      <span class="z-score">{{score}}<span style="font-size: 20px;color: blueviolet;display: inline-block;margin-left: 5px;color: RGB(72,72,72)">分</span></span>
      <div class="exam">
        <div v-for="(item,index) in this.getContent.content.currentExam" :key=index class="con">
          <div class="ques">
            <span style="margin-right: 10px">{{index+1}}</span>
            <span v-if="item.questioncontent !== null">{{item.questioncontent}}</span>
            <span v-else>{{item.stuinfo}}</span>
            <span style="color: darkgrey" v-if="item.questioncontent !== null">（最高分：{{item.score}}分）</span>
            <span style="float: right;font-size: 14px" v-if="item.questioncontent !== null">得<el-input disabled v-model="item.analysis"></el-input>分</span>
          </div>
          <div v-if="item.questiontype === 1||item.questiontype === 3">
            <div class="opt" v-for="(ite,ind) in item.answer" :key="ind">
              <el-radio-group v-model="item.images">
                <el-radio disabled :label="ind">
                  <span>{{ite.answer}}</span>
                </el-radio>
              </el-radio-group>
            </div>
          </div>
          <div v-if="item.questiontype === 2">
            <div class="opt" v-for="(ite,ind) in item.answer" :key="ind">
              <el-checkbox disabled v-model="ite.preview" :label="ind">
                <span>{{ite.answer}}</span>
              </el-checkbox>
            </div>
          </div>
          <div v-if="item.questiontype === 4">
            <div class="opt" v-for="(ite,ind) in item.answer" :key="ind">
              <el-input disabled v-model="item.images" style="width: 700px"></el-input>
            </div>
          </div>
          <div v-if="item.questiontype === 5">
            <div v-if="item.stuinfo ==='性别'">
              <el-radio-group style="padding: 7px 0" v-model="item.images">
                <el-radio disabled label="男">
                  <span>男</span>
                </el-radio>
                <el-radio disabled label="女">
                  <span>女</span>
                </el-radio>
              </el-radio-group>
            </div>
            <div v-else>
              <div class="opt" >
                <el-input disabled v-model="item.images" style="width: 700px"></el-input>
              </div>
            </div>
          </div>
          <div v-if="item.questiontype === 6">
            <div class="opt" >
              <el-input disabled style="width: 700px" type="textarea" :autosize="{ minRows: 4, maxRows: 6}" v-model="item.images"></el-input>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AnswerDetail",
  data(){
    return{
      content: '',
      score:0
    }
  },
  mounted(){
    this.getAnswer();
  },
  methods: {
    getAnswer(){
      var num = this.$route.query.ha
      // var list;
      this.$axios.get('exam/userAnswer',{
        params:{
          recordid: num
        }
      }).then(res => {
        console.log("***********")
        console.log(res)
        console.log("***********")
        this.answerList  = res.data.useranswer.split(";");
        console.log(this.answerList);
        this.OneScore = res.data.score.split(",");
        this.score = 0;
        for(var i in this.getContent.content.currentExam){
          this.getContent.content.currentExam[i].analysis = parseInt(this.OneScore[i]);
          this.score+=parseInt(this.getContent.content.currentExam[i].analysis);
          if(this.getContent.content.currentExam[i].questiontype === 1){
            this.getContent.content.currentExam[i].images = parseInt(this.answerList[i]);
          } else if(this.getContent.content.currentExam[i].questiontype ===2){
            var mulList = this.answerList[i].split(",");
            for(let j in mulList){
              this.getContent.content.currentExam[i].answer[mulList[j]].preview = true;
            }
          }else if(this.getContent.content.currentExam[i].questiontype === 3){
            console.log(this.answerList[i]);
            var pd = this.answerList[i].split(",");
            console.log("-------")
            console.log(pd)
            console.log("-------")
            for(let j in pd){
              if(pd[j] === "True"){
                this.getContent.content.currentExam[i].images = parseInt(j);
              }
            }
          }else if(this.getContent.content.currentExam[i].questiontype === 4){
            this.getContent.content.currentExam[i].images = this.answerList[i];
          }else if(this.getContent.content.currentExam[i].questiontype === 5){
            this.getContent.content.currentExam[i].images = this.answerList[i];
          }else {
            this.getContent.content.currentExam[i].images = this.answerList[i];
          }
        }
      })
    },
    nextAnswer(){
      var ha;
      for(var i in this.getNum.num){
        if(this.getNum.num[i] === parseInt(this.$route.query.ha)){
          var j = parseInt(i)+1;
          if(this.getNum.num[j] === undefined){
            ha = "no"
            this.$confirm('当前已经是最后一份试卷啦！是否返回数据统计?', '提醒', {
              confirmButtonText: '返回数据统计',
              cancelButtonText: '留在当前试卷',
              type: 'info'
            }).then(() => {
              this.$router.push('/DataReport');
            }).catch(() => {
              this.$message({
                type: 'success',
                message: '回到当前试卷'
              });
            });
          }else{
            ha = this.getNum.num[j]
            var datadetail = this.getReport.reportDate.data.dataDetail[j];
          }
        }
      }
      if(ha !== "no"){
        this.$router.push({
          path: '/AnswerDetail',
          query: {
            row: datadetail,
            ha:ha
          }
        })
        this.getAnswer();
      }
    }
  },
  computed: {
    getContent(){
      return this.$store.state.content
    },
    getReport(){
      return this.$store.state.reportDate
    },
    getNum(){
      return this.$store.state.num
    },
  },
  watch: {
    getContent(){
      this.content = this.$store.state.content.content
    }
  },
}
</script>

<style scoped>
.nav {
  position: relative;
}
.nav .left {
  position: fixed;
  top: 0;
  width: 20%;
  height: 750px;
  color: #484848;
}
.nav .left .title {
  font-size: 30px;
  display: block;
  margin: 50px 0 10px 30px;
}
.nav .left .center {
  /*color: #AAAAAA;*/
  color: RGB(193,193,193);
  font-size: 13px;
  margin: 60px 0 100px 30px;
}
.nav .left .center .one {
  display: block;
  margin-bottom: 10px;
}
.nav .left .next {
  margin: 60px 0 100px 30px;
  border-color: RGB(233,238,243);
}
.nav .right {
  position: relative;
  float: right;
  width: 80%;
  height: 1000px;
  /*background-color: #ecebeb;*/
  background-color: #E9EEF3;
}
.nav .right .head {
  position: absolute;
  top: 30px;
  left: 50px;
  padding-left: 10px;
  border-left: 3px solid #87a6cd
}
.z-score{
  position: absolute;
  top: 22px;
  right: 50px;
  font-size: 35px;
  display: inline-block;
  font-weight: 500;
  color: RGB(205,92,92);
}
.nav .right .exam {
  width: 90%;
  height: 100%;
  position: absolute;
  top: 70px;
  left: 50px;
  background-color: white;
  padding: 20px 20px;
}
.nav .right .exam .con {
  padding: 20px 20px;
  border-bottom: 1px solid #ecebeb;
}
.nav .right .exam .con .ques {
  color: #484848;
  margin-bottom: 20px;
}
.nav .right .exam .con .ques>>>.el-input{
  display: inline;
  margin: 0 5px;
}
.nav .right .exam .con .ques>>>.el-input__inner{
  height: 30px;
  width: 50px;
}
.nav .right .exam .con .opt {
  width: 800px;
  margin: 10px 15px;
}
</style>
